<template>
    <!-- <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多评论120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
                <div class="cmt-title">
                    第{{i}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{
                        {item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content=='undefined'?'此用户很懒，什么都没说':item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div> -->
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多评论120字）" maxlength="120"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    第1楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    跟动画比，少了一个片段。动画里面有个片段是遇上干旱，水源日趋减少。刀疤滥杀动物，加剧了生态失衡。动画片对生态平衡诠释得更充分。
                </div>
            </div>
             <div class="cmt-item">
                <div class="cmt-title">
                    第2楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    本来就是以莎士比亚的《王子复仇记》为原型的故事，当初迪士尼创新用了动物的形象，故事还是套用人类世界的，为什么总用“科学”分析呢？这样说起来，《疯狂动物城》也不合理啊，“小黄人”是哪种胶囊呢？最夸张的是这篇文章出自有610万粉丝的《中国日报》头条号，你们这种主流媒体能有点正事不？
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第3楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    说实话，这片整体不错，但写实的太过头了跟动物世界都没区别了……动画其实更好看
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第4楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    我一直纳闷辛巴出生了，草原的动物们有什么可欢呼的？[酷拽]。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第5楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    我就想知道辛巴的父亲母亲，都是素食动物吗。他们平时不吃草原上的动物吗。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第6楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    1111
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第7楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    此用户很懒，没有发表评论！
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第8楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    此用户很懒，没有发表评论！
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第9楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    此用户很懒，没有发表评论！
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第10楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2019-07-18
                </div>
                <div class="cmt-body">
                    此用户很懒，没有发表评论！
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from "mint-ui"

// export default{
//     data(){
//         return {
//             pageIndex:1,
//             comments:[],
//             msg:''
//         };
//     },
//     created(){
//         this.getComments();
//     },
//     methods:{
//         getComments(){
//             this.$http
//             .get("api/getcomments/"+this.id+"?pageindex="+ this.pageIndex)
//             .then(result =>{
//                 if(result.body.status===0){
//                     // this.comments=result.body.message;
//                     this.comments=this.comments.concat(result.body.message);
//                 }else{
//                     Toast("获取评论失败！");
//                 }
//             });
//      }
//     },
//     getMore(){
//         this.pageIndex++;
//         this.getComments();
//     },
//     postComment(){
//         if(this.meg.trim().length===0){
//             return Toast ("评论内容不能为空")
//         }
//         this.$http.post('api/postcomment/'+this.$route.params.id,{
//             content:this.msg.trim()})
//             .then(function(result){
//                 if(result.body.status===0){
//                     var cmt={
//                         user_name:'匿名用户',
//                         add_time:Date.now(),
//                         content:this.msg.trim()
//                     };
//                     this.comments.unshift(cmt);
//                     this.msg='';
//                 }else{
//                     Toast ('发表评论失败！')
//                 }
//             })
//     },
//     props:["id"]
// }

</script>

<style lang="less" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
                
            }
        }
    }
}
</style>
